<template>
    <div :class="className" :style="{ height: height, width: width }">
    </div>
</template>

<script>
import * as echarts from 'echarts'
import "echarts-gl";
//   require('echarts/theme/macarons') // echarts theme
import resize from '../../../views/dashboard/mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        }
    },
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el)
            const pieUnit = '万'
            const pieData = [
                { statType: '01', name: '党纪处分', value: 50, color: '#FB6570' },
                { statType: '02', name: '监督执纪', value: 40, color: '#DE0516' },
                { statType: '03', name: '违规失责', value: 30, color: '#F57A12' },
                { statType: '04', name: '轻微违规积分', value: 20, color: '#F5B813' },
            ]

            const pieData2 = [
                { statType: '01', name: '体能', value: 50, color: '#3869d2' },
                { statType: '02', name: '灭火技能', value: 40, color: '#69b26b' },
                { statType: '03', name: '救援技能', value: 30, color: '#b3a394' },
                { statType: '04', name: '应急反应能力', value: 20, color: '#d47437' },
            ]

            // 饼图数据处理
            const pieDataHandle = data => {
                data.sort((a, b) => b.value - a.value);
                data.map(item => {
                    return { value: item.value, name: item.name };
                });
                return data;
            }
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                center: ['20%', '50%'],
                // backgroundColor: "#fff",
                // 颜色配置
                color: pieData2.map(el => el.color),
                title: {
                    // text: "{a|设备总数(台)}\n\n{b|1100}",
                    subtext: '{a|类型}{b|数量}{c|占比(%)}',
                    subtextStyle: {
                        rich: {
                            a: {
                                width: 360,
                                fontSize: 12,
                                color: '#fff',
                                align: "right",
                            },
                            b: {
                                width: 80,
                                fontSize: 12,
                                color: '#fff',
                                align: "right",
                            },
                            c: {
                                width: 80,
                                fontSize: 12,
                                color: '#fff',
                                align: "right",
                            },
                        }
                    },
                    // x: "35%",
                    right: '2%',

                    y: "14%",
                },

                legend: {
                    // backgroundColor: '#f9fafc',
                    top: 'center',
                    right: '0',
                    itemHeight: 12,
                    itemWidth: 12,
                    // y: '20%',
                    width: 20,
                    padding: [50, 20, 20],
                    textStyle: {
                        rich: {
                            one: {
                                width: 100,
                                height: 30,
                                color: '#ffff',
                                fontSize: 14,
                                // fontWeight: 700,
                            },
                            two: {
                                width: 60,
                                height: 30,
                                color: '#fff',
                                fontSize: 14,
                                // fontWeight: 700,
                            }, three: {
                                width: 60,
                                height: 30,
                                color: '#fff',
                                fontSize: 14,
                                // fontWeight: 700,
                            },
                        },
                    },
                    formatter: (name) => {
                        var total = 0;
                        var target;
                        var rate;
                        for (var i = 0; i < pieData2.length; i++) {
                            total += pieData2[i].value;
                            if (pieData2[i].name == name) {
                                target = pieData2[i].value;
                            }
                            rate = (total / target).toFixed(2)
                        }
                        return `{one|${name}} {two|${target}} {three|${rate}%}`;
                    },
                },
                series: [
                    {
                        type: 'pie',
                        roseType: 'radius',
                        radius: ['15%', '50%'],
                        center: ['20%', '50%'],
                        // 处理数据，进行排序
                        data: pieDataHandle(pieData2),
                        hoverAnimation: false,
                        itemStyle: {
                            // normal: { borderWidth: 1 }
                            borderWidth: 0, //描边线宽
                            borderColor: '#fff',
                        },

                        labelLine: {
                            // show: false,
                            // length: 0
                            normal: {
                                smooth: 0.2,
                                length: 10,
                                length2: 15,
                                padding: [5, 5], // 上下左右各偏移 5 像素
                            }
                        },
                        
                        
                        label: {
                            show: false,
                            padding: [0, 10, 0, 0],
                            // 展示所有标签
                            formatter: params => {
                                if (params.name) {
                                    return '{name|' + params.name + '}';
                                }
                            },
                            rich: {
                                name: { fontSize: 16, color: '#a6e4ff' }
                            }
                        },
                        emphasis: {
                            focus: 'self', //其他虚化
                            label: {
                                rich: {
                                    aName: {
                                        // 名称的字体样式
                                        fontSize: 16,
                                        color: '#a6e4ff',
                                        padding: [0, 0, 0, 0]
                                    },
                                    household: {
                                        // 户数的字体样式
                                        fontSize: 18,
                                        color: '#fff',
                                        padding: [0, 0, 0, 0]
                                    },
                                    discount: {
                                        fontSize: 16,
                                        color: '#a6e4ff',
                                        padding: [0, 0, 0, 0]
                                    }
                                }
                            }
                        }
                    },
                    
                ]
            };
            this.chart.setOption(option)
        },

    }
}
</script>